<template>
    <el-menu default-active="0" mode="horizontal" class="headerBar">

        <el-tooltip effect="light" content="上一话" placement="bottom" show-after="1000">
            <el-button @click="prevChapter" :disabled="cwStore.prop.chapterIndex === 0">
                <go-start :theme="iconConf.theme" :size="iconConf.size" fill="#333"
                    :strokeWidth="iconConf.strokeWidth" />
                上一话
            </el-button>
        </el-tooltip>

        <el-tooltip effect="light" content="下一话" placement="bottom" show-after="1000">
            <el-button @click="nextChapter" :disabled="cwStore.prop.chapterIndex === cwStore.chapterList.length - 1">
                下一话
                <go-end :theme="iconConf.theme" :size="iconConf.size" fill="#333" :strokeWidth="iconConf.strokeWidth" />
            </el-button>
        </el-tooltip>


        <el-slider v-model="cwStore.currentPos" :max="cwStore.infoLength" :min="1" :step="1"
            style="width: 50%;margin-left: 20px;" />

        <el-text style="margin-left: 20px;">
            {{ cwStore.currentPos + "/" + cwStore.infoLength }}
        </el-text>


    </el-menu>
</template>

<script setup lang="ts">
import { GoStart, GoEnd } from '@icon-park/vue-next';
import { useBaseStore } from '@/stores/baseStore';
import { useCWStore } from '@/stores/cwStore';
import { ref, watch } from 'vue';

const baseStore = useBaseStore();
const cwStore = useCWStore();
const iconConf = baseStore.getIconConf



watch(
    () => cwStore.currentID,
    () => {
        cwStore.currentPos = cwStore.currentID
    });

const prevChapter = function () {
    cwStore.currentPos = 1;
    cwStore.prop.chapterIndex--;
}

const nextChapter = function () {
    cwStore.currentPos = 1;
    cwStore.prop.chapterIndex++;
}

</script>

<style scoped>
.headerBar {
    -webkit-app-region: drag;
    padding-left: 5%;
    align-items: center;
    border-bottom: none !important;
    gap: 10px;
    height: 100%;
    padding-top: 15px;
    padding-bottom: 5px;
    box-shadow: var(--el-box-shadow-lighter);
    z-index: 1;
    width: 100%;
    padding-bottom: 12px;
}

.headerBar * {
    -webkit-app-region: no-drag;
}
</style>